<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">部门管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/GetDepartmentView">显示部门信息</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 显示 -->
  <div style="margin-top: 20px">
    <el-button
      type="primary"
      size="small"
      @click="Eject.dialogFormVisible = true"
      >新增</el-button
    >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="departmentNo" label="部门编号" width="180" />
      <el-table-column prop="departmentName" label="部门名称" width="180" />
    </el-table>
  </div>

  <!-- 新增 -->
  <div>
    <el-dialog
      v-model="Eject.dialogFormVisible"
      :title="Eject.title"
      width="1000"
    >
      <el-form :model="form" :inline="true">
        <el-form-item label="部门编号:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.departmentNo"
            autocomplete="off"
            style="width: 180px; height: 30px"
            :readonly="form.autoGenerate"
            clearable
            @click.native="handleCodeClick"
          />
          <template slot="prepend">R</template>
          <el-switch
            width="40"
            v-model="form.autoGenerate"
            active-text="自动生成"
            active-color="#67C23A"
            @change="handleSwitchChange"
          />
        </el-form-item>
        <el-form-item label="部门名称:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.departmentName"
            placeholder="请输入部门名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="saveDepartment()">保存</el-button>
          <el-button type="primary" @click="Eject.dialogFormVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
import { readaxios, writeaxios } from "@/https/axioshttps"
const apiUrl = import.meta.env.VITE_APP_API_URL;
const tableData = ref([]);
onMounted(() => {
  getDepartment();
});
// 显示
const getDepartment = () => {
  axios.get(apiUrl+"/T5/Departments/GetDepartment")
    .then((res) => {
      tableData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const form = reactive({
  departmentID: 0,
  departmentNo: "",
  departmentName: "",
  autoGenerate: false,
});

const Eject = reactive({
  dialogFormVisible: false,
  title: "添加部门",
  formLabelWidth: "120px",
});

const saveDepartment = () => {
 
  axios.post(apiUrl+"T6/Departments", form).then((res) => {
    if (res.data.code == 100) {
      ElMessage.success(res.data.msg);
      form.departmentNo = "";
      form.departmentName = "";
      form.autoGenerate = false;
      Eject.dialogFormVisible = false;
      getDepartment();
      return;
    } else {
      ElMessage.error(res.data.msg);
      getDepartment();
    }
  });
};


// 生成部门编号
const generateCode = () => {
  const timestamp = Date.now(); // 获取精确到毫秒的时间戳
  form.departmentNo = `BM${timestamp}`;
};

const handleSwitchChange = (val: boolean) => {
  form.autoGenerate = val;
  if (val) {
    generateCode(); // 开启自动生成时立即生成
  } else {
    form.departmentNo = ""; // 关闭时清空编号
  }
};

const handleCodeClick = () => {
  if (form.autoGenerate) {
    generateCode(); // 点击输入框时重新生成
  }
};
</script>

<style scoped>
</style>